<template>
    <div class="collect-page">
        <div class="nav">
            <van-nav-bar title="收藏页" fixed left-text="返回" right-text="" left-arrow @click-left="$router.go(-1)"/>
        </div>
        <div class="problem-list">
            <problem class="question" ref="child"
              v-for="(item,index) in questionList" :key="index"
              :index="index + 1" :problem="item" :showCollect="true"
              @collectProm="collectProm">
            </problem>
        </div>
    <div id="pagebox" v-show="isSuccess">
      <van-button type="primary" size="small" @click="changePage(-1)">上一页</van-button>
      <input type="number" placeholder="页数" v-model="page" @keypress.prevent.enter="getCollectByPage">
      <van-button type="primary" size="small" @click="changePage(1)">下一页</van-button>
    </div>
    <div id="slider" v-show="slider.isShow">
        <div class="switchbox">
          <span>开启全部答案:</span>
          <br><br>
          <van-switch v-model="slider.chicked" size="15px" @input="showAllAnswer(slider.chicked)"/>
    </div>
        <br>
    <div class="btnbox">
          <van-button round type="info" size="mini" @click="window.scrollTo(0,0)">到顶部</van-button>
          <br><br>
          <van-button round type="info" size="mini" @click="changePage(-1)">上一页</van-button>
          <br><br>
          <van-button round type="info" size="mini" @click="changePage(1)">下一页</van-button>
        </div>
    </div>
    <div id="rondslider" v-show="isSuccess"
         v-swipeleft=" (e) => showSlider(false)" 
         v-swiperight=" (e) => showSlider(true)"
         v-tap=" (e) => showSlider(!slider.isShow)">
      <span>&gt;&gt;</span>
    </div>
</div>
</template>


<script>
import problem from '../../components/Problem'
import axios from 'axios'
import Vue from 'vue';
import vueTouch from 'kim-vue-touch'
import { NavBar } from 'vant';
import { Search } from 'vant';
import { Toast } from 'vant';
import { Switch } from 'vant';
import { Button } from 'vant';

Vue.use(vueTouch)
Vue.use(Button);
Vue.use(Switch);
Vue.use(Toast);
Vue.use(NavBar);

export default {

    // 组件创建前事件
    beforeMount: function(){
        this.$store.state.isShow = false
        this.getCollectQuestion(this.page)
    },
    components:{
        problem
    },
    data(){
        return {
            page:1,
            questionList:'',
            slider:{
            chicked:false,
            isShow:false
            },
            isSuccess:false
        }
    },
    methods:{
        showAllAnswer(isShow){  //是否显示所有答案
          try {
            if(isShow){
            for(let i=0 ; i<this.$refs.child.length; i++){
            this.$refs.child[i].showAnswer()
            }
          }else{
            for(let i=0 ; i<this.$refs.child.length; i++){
            this.$refs.child[i].closeAnswer()
            }
          }
          } catch (error) {
            //题目可能还未加载出来!
          }
        },
        // 通过直接输入页数获取题目
        getCollectByPage(){
          this.page = parseInt(this.page)
          if(this.page < 1){
            Toast('页数信息错误!')
            return;
          }
          this.getCollectQuestion(this.page)
        },
        // 获取收藏的题目
        getCollectQuestion: function(page){
            Toast.loading({
                message: '获取用户收藏题库中...',
                forbidClick: true,
                duration: 0
            });
            axios.post(`/api/prom/collect/${page}`).then(res => {
                Toast.clear()
                if(res.data.code == 400){
                    // 获取数据成功
                    this.isSuccess = true
                    let resp = this.transferText(JSON.stringify(res.data))
                    this.questionList = JSON.parse(resp).data
                } else {
                    Toast(res.data.message)
                    if(res.data.code == 401){
                        // 未登录
                        localStorage.clear()
                        this.$router.replace({path: '/login'})
                    }
                }
            }).catch(err => {
                Toast(err)
            })
        },
        // 切换页
        changePage(step){
            this.page = parseInt(this.page)
            if(this.page + step < 1){
                Toast('您已经处于第一页了!')
                return;
            }
            this.page = this.page + step
            this.getCollectQuestion(this.page)
        },
        // 取消收藏题目
        collectProm(index,problemId){
            axios.post('/api/prom/cancelColl','problemId='+problemId).then(res=>{
            if(res.data.code == 1005){
                // 取消成功
                Toast(res.data.message)
                this.questionList.splice(index - 1,1)
                if(this.questionList.length === 0){
                    this.isSuccess = false
                }
            } else {
                // 取消失败
                Toast(res.data.message)
                if(res.data.code == 401){
                    localStorage.clear()
                    this.$router.replace({path: '/login'})
                }
            }
            }).catch(err=>{
                Toast(err)
            })
        },
        showSlider(value){ //打开或隐藏侧边栏
          this.slider.isShow = value
          if(value){
            document.querySelector('#rondslider').style.left='100px'
            document.querySelector('#rondslider span').innerHTML='&lt;&lt;'
          } else {
            document.querySelector('#rondslider').style.left='0px'
            document.querySelector('#rondslider span').innerHTML='&gt;&gt;'
          }
        },
        // 转义html特殊字符
      transferText(str) {
			  str = str.replace(/&lt;/g,'<')
				.replace(/&gt;/g,'>')
				.replace(/&amp;/g,'&')
				.replace(/&quot;/g,'"')
				.replace(/&#39/g,"'")
				.replace(/&nbsp;/g,' ')
			return str
		}
    }
    
}
</script>

<style scoped lang="less">
.nav{
     background: white;
     width: 100%;
     height: 47px;
     z-index: 9;
     border-bottom: 1px solid #ccc;
     position: fixed;
     top: 0px;
     left: 0px;
} 
.problem-list{
  margin-top: 60px;
}
.question  {
  margin-top: 10px !important;
}

#pagebox {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  > * {
    margin:0 20px;
  }
  input{
    outline: none;
    border: 1px solid #000;
    width: 25px;
    text-align: center;
  }
}

#slider {
  position: fixed;
  left: 0;
  top: 50%;
  width: 100px;
  height: 200px;
  opacity: 0.5;
  margin-top: -50px;
  background-color: black;
  .switchbox {
    span {
      font-size: 5px;
      color: white;
    }
  }
}

#rondslider {
  position: fixed;
  left: 0;
  top: 50%;
  width: 28px;
  height: 50px;
  opacity: 0.5;
  margin-top: 20px;
  background-color: black;
  border-radius: 0 50% 50% 0;
  text-align: center;
  z-index: 5;
  span {
    font-size: 20px;
    color: #ccc;
    display: block;
    line-height: 50px;
  }
}
</style>